<template>
  <div class="job-item-box">
    <el-card class="job-card">
      <div class="clearfix" slot="header">
        <span class="job-card-head">{{jobItem.name}}</span>
        <!--          <el-statistic :value="jobItem.expire"  time-indices title="商品降价">-->

        <!--          删除-->
        <el-button @click="handleDelete" circle icon="el-icon-delete" size="mini"
                   style="float:right;margin-left: 5px" type="danger"></el-button>
        <!--          修改-->
        <el-button @click="handleUpdate" circle icon="el-icon-edit" size="mini"
                   style="float: right;margin-left: 5px" type="primary"></el-button>
        <!--          收藏-->
        <el-button :icon="isCollectedIcon" :style="{color:isCollectedColor}" @click="handleCollect"
                   circle
                   size="mini"
                   style="float: right;margin-left: 5px">

        </el-button>

        <!--          到期时间-->
        <span style="float: right;margin-left: 5px;font-size: 14px;color: grey;margin-top: 5px">
            <span style="font-size: 10px">
              到期时间:
            </span> {{formatJobExpire}}
          <!--            <i class="el-icon-warning" style="color: orangered"></i>-->
          </span>

        <!--          提示即将到期-->
        <span style="margin-left: 5px;color: tomato;font-size: 14px" v-if="isNearExpiration">
            即将到期
            <i class="el-icon-warning" style="color: orangered"></i>
          </span>
      </div>
      <!--        倒计时-->
        <el-statistic :value="jobItem.expire.getTime()"
                      :value-style="dateStatisticValueStyle"
                      format="HH:mm:ss"
                      time-indices

        >
          <template slot="title">
            <span style="color: gray">距离到期还有</span>
          </template>
          <template slot="prefix">
            <i class="el-icon-time" style="font-size:20px"></i>
          </template>
          <template slot="suffix">
            <span style="font-size: 20px">≈</span>
            <span style="color: black">{{countdown }} </span>
              Day
            <i class="el-icon-s-flag" style="color: teal"></i>
          </template>
        </el-statistic>

      <div class="job-card-content">
        {{job.note}}
      </div>
    </el-card>
  </div>
</template>

<script>

  import "../../assets/js/object"
  import {job} from "../../assets/js/object";
  import {formatDate} from "../../util/time";

  export default {
    name: "JobItem",
    props: {
      job: job
    },
    data() {
      return {
        jobItem: this.job,
        // 倒计时
        dateStatisticValueStyle: {
          color: 'red',
          fontSize: '25px'
        }
      }
    },
    methods: {
      handleDelete() {
        this.$confirm('此操作将删除该任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          console.log("发出删除")
          this.$emit("deleteJob", this.jobItem)
        }).catch(() => {

        });

      },
      handleUpdate() {
        this.$emit("updateJob", this.jobItem)
      },
      handleCollect() {
          this.$emit("collectJob", this.jobItem)
      }

    },
    computed: {
      isNearExpiration() {
        let expire = this.jobItem.expire

        return (expire.getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24 < 2
      },
      isCollectedColor() {
        return this.jobItem.collect ? '#FFCD01' : ''
      },
      isCollectedIcon() {
        return this.jobItem.collect ? 'el-icon-star-on' : 'el-icon-star-off'
      },
      formatJobExpire() {

        return formatDate(this.jobItem.expire)
      },
      countdown(){
        return Math.ceil((this.job.expire.getTime()-new Date().getTime())/3600/24/1000)
      }
    },
    watch: {
      job(newV) {
        this.jobItem = newV
      }
    },

  }
</script>

<style lang="less" scoped>
  .job-item-box {
    width: 100%;

    .job-card {
      .job-card-head {
        font-size: 20px;
      }

      .job-card-content {
        font-size: 14px;
        color: gray;
      }
    }
  }
</style>
